<template>
    <a-form class="smart-query-form">
        <a-row class="smart-query-form-row">
            <a-form-item label="日志类型" class="smart-query-form-item">
                <a-select v-model:value="queryParam.logType" style="width: 200px" allowClear placeholder="请选择日志类型">

                    <a-select-option value="3">事件上报</a-select-option>
                    <a-select-option value="5">设备上线</a-select-option>
                    <a-select-option value="6">设备离线</a-select-option>
                </a-select>

            </a-form-item>
            <a-form-item label="标识符" class="smart-query-form-item">
                <a-input style="width: 200px" v-model:value="queryParam.identity" placeholder="请输入标识符" />
            </a-form-item>
            <a-form-item label="时间范围" class="smart-query-form-item">
                <a-range-picker @change="changeCreateDate" v-model:value="queryParam.timeRanges" style="width: 240px" />
            </a-form-item>
            <a-form-item class="smart-query-form-item smart-margin-left10">
                <a-button-group>
                    <a-button type="primary" @click="onSearch">
                        <template #icon>
                            <ReloadOutlined />
                        </template>
                        查询
                    </a-button>
                    <a-button @click="resetQuery">
                        <template #icon>
                            <SearchOutlined />
                        </template>
                        重置
                    </a-button>
                </a-button-group>
            </a-form-item>
        </a-row>
    </a-form>

    <a-card size="small" :bordered="true">
        <a-table size="small" bordered :loading="tableLoading"  :columns="columns"
            :data-source="logData" :pagination="false" style="height: 450px;overflow-y: auto;">
            <template #bodyCell="{ record, column }">
                <template v-if="column.dataIndex === 'logType'">
                    <span v-if="record.logType == 3">事件上报</span>
                    <span v-if="record.logType == 5">设备上线</span>
                    <span v-if="record.logType == 6">设备离线</span>
                </template>
                <template v-if="column.dataIndex === 'mode'">
                    <span v-if="record.mode == 1">影子模式</span>
                    <span v-if="record.mode == 2">在线模式</span>
                    <span v-if="record.mode == 3">离线模式</span>
                </template>
            </template>
        </a-table>

        <div style="float: right;right: 10px;">
            <a-pagination v-model:current="queryParam.pageNum" v-model:page-size="queryParam.pageSize"
                :page-size-options="pageSizeOptions" :total="queryParam.total" show-size-changer
                @showSizeChange="onShowSizeChange" @change="onSizeChange">

            </a-pagination>
        </div>
    </a-card>
</template>

<script setup>
import { onMounted, reactive, ref, watch, createVNode } from 'vue';
import { logApi } from '/src/api/device/log';
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import _ from 'lodash';
import { SmartLoading } from '/src/components/framework/smart-loading';
import { smartSentry } from '/src/lib/smart-sentry';
import { useRoute } from 'vue-router';
const route = useRoute();


// -----------------------  筛选 ---------------------
const queryParam = ref(
    {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        serialNumber: route.query.serialNumber,
        logType: "",
        identity: "",
        beginTime: "",
        endTime: "",
        timeRanges: ""
    }
)

function changeCreateDate(dates, dateStrings) {
    queryForm.value.beginTime = dateStrings[0];
    queryForm.value.endTime = dateStrings[1];
}

function onShowSizeChange(current, size) {
    queryParam.value.pageNum = current;
    queryParam.value.pageSize = size;
    init()

}

function onSizeChange(page, pageSize){
    queryParam.value.pageNum = page;
    queryParam.value.pageSize = pageSize;
    init()
}

const pageSizeOptions = ref(['10', '20', '30', '40', '50']);
// ----------------------- 部门树的展示 ---------------------
const tableLoading = ref(false);


const logData = ref([])

const columns = ref([
    {
        title: '类型',
        dataIndex: 'logType',
        key: 'logType',
    },
    {
        title: '模式',
        dataIndex: 'mode',
        key: 'mode',
    },
    {
        title: '时间',
        dataIndex: 'createTime',
        key: 'createTime',

    },
    {
        title: '标识符',
        dataIndex: 'identity',
        key: 'identity',

    },
    {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
    },
]);

onMounted(() => {
    init();
});

// 查询部门列表并构建 部门树
async function init() {

    try {
        tableLoading.value = true;
        let res = await logApi.geteventList(queryParam.value);

        logData.value = res.data.rows;
        queryParam.value.total = res.data.total

    } catch (e) {
        smartSentry.captureError(e);
    } finally {
        tableLoading.value = false;
    }
}



// 重置
function resetQuery() {
    queryParam ={
        pageNum: 1,
        pageSize: 10,
        total: 0,
        serialNumber: "",
        logType: "",
        identity: "",
        beginTime: "",
        endTime: "",
        timeRanges: ""
    }
    onSearch();
}

// 搜索
function onSearch() {
    init()
}



</script>

<style scoped lang="less"></style>